<script setup lang="ts">
import {
  InfoFilled,
  RemoveFilled,
  SuccessFilled,
  CircleCloseFilled,
} from '@element-plus/icons-vue'
import { watch } from 'vue'
defineOptions({
  name: 'medicine',
})
const tableData = ref([
  {
    date: '2016177',
    name: 1,
    address: '3.3%布洛芬缓释胶囊-哈尔滨制药厂',
    combination: 1,
    aaa: '',
    icon: 2
  },
  {
    date: '',
    name: 2,
    address: '阿莫西林',
    combination: 2,
    icon: 3
  },
  {
    date: '',
    name: 3,
    address: '感冒灵',
    combination: 3,
    icon: 3
  },
])
const focusNextInput = (event: any) => {
  console.log(event, '按下回车')
}
watch(tableData.value, (newValue) => {
  console.log(newValue, '输入处方')
  if (newValue[newValue.length - 1].address.length > 1) {
    console.log('需要新增行')
    tableData.value.push({
      date: '',
      name: newValue.length + 1,
      address: '',
      combination: 0,
      icon:1
    })
  }
})
</script>

<template>
  <div id="medicine">
    <div class="header">
      <div class="left">
        <span>合计：</span>
        <span class="import">3</span>
        <span>种药物&nbsp;/&nbsp;共</span>
        <span class="import">15</span>
        <span>件&nbsp;&nbsp;&nbsp;</span>
        <span>共计：</span>
        <span class="import">￥1500</span>
      </div>
      <div class="right">
        <el-button type="primary">新增</el-button>
        <el-button type="primary">处方打印</el-button>
        <el-button type="primary">转方</el-button>
        <el-button type="warning">退药</el-button>
        <el-button type="danger">删除</el-button>
      </div>
    </div>
    <div class="body">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="date" label="单据编号" width="100">
        </el-table-column>
        <el-table-column prop="name" label="序号" width="55">
          <template #default="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="" width="55">
          <template #default="scope">
            <div class="combination-t" v-if="scope.row.combination == 1"></div>
            <div class="combination-l" v-if="scope.row.combination == 2"></div>
            <div class="combination-b" v-if="scope.row.combination == 3"></div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="医嘱名称" width="228">
          <template #default="scope">
            <div class="input">
              <el-input
                type="textarea"
                autosize
                v-model="scope.row.address"
                :id="'xyname' + scope.$index"
                @keyup.enter="focusNextInput(scope)"
              ></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="单次剂量" width="100">
          <template #default="scope">
            <div class="input">
              <el-input
                type="textarea"
                autosize
                v-model="scope.row.aaa"
              ></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="剂量单位" width="54"> </el-table-column>
        <el-table-column prop="" label="给药方式" width="85"></el-table-column>
        <el-table-column prop="" label="给药执行" width="85"></el-table-column>
        <el-table-column prop="" label="频次" width="54"></el-table-column>
        <el-table-column prop="" label="天数" width="54"></el-table-column>
        <el-table-column prop="" label="总量" width="54"></el-table-column>
        <el-table-column prop="" label="售价单位" width="54"></el-table-column>
        <el-table-column prop="" label="单价" width="54"></el-table-column>
        <el-table-column prop="" label="皮试" width="54"></el-table-column>
        <el-table-column prop="" label="皮试结果" width="85"></el-table-column>
        <el-table-column prop="" label="状态" width="54">
          <template #default="scope">
            <el-icon v-if="scope.row.icon == 1" style="color: #333;font-size: 22px;"><InfoFilled /></el-icon>
            <el-icon v-if="scope.row.icon == 2" style="color: blue;font-size: 22px;"><RemoveFilled /></el-icon>
            <el-icon v-if="scope.row.icon == 3" style="color: green;font-size: 22px;"><SuccessFilled /></el-icon>
            <el-icon v-if="scope.row.icon == 4" style="color: red;font-size: 22px;"><CircleCloseFilled /></el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="" label="执行科室" width="85"></el-table-column>
        <el-table-column prop="" label="医生嘱托"></el-table-column>
        <el-table-column prop="" label="诊断" width="200"></el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <div class="li">
        <el-icon style="color: #333"><InfoFilled /></el-icon>
        <span>未保存</span>
      </div>
      <div class="li">
        <el-icon style="color: blue"><RemoveFilled /></el-icon>
        <span>已保存</span>
      </div>
      <div class="li">
        <el-icon style="color: green"><SuccessFilled /></el-icon>
        <span>已付款</span>
      </div>
      <div class="li">
        <el-icon style="color: red"><CircleCloseFilled /></el-icon>
        <span>退药</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#medicine {
  width: 100%;
  height: 100%;
  .header {
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      .import {
        color: red;
      }
    }
  }
  .body {
    height: calc(100% - 66px);
  }
  .bottom {
    display: flex;
    width: 100%;
    height: 30px;
    background-color: #f5f7fa;
    .li {
      margin-right: 20px;
      display: flex;
      align-items: center;
      .el-icon {
        font-size: 22px;
      }
    }
  }
  .input {
    width: 100%;
    height: 100%;
    :deep(.el-textarea__inner) {
      // height: 36px;
      box-shadow: none;
      // padding: none;
    }
    :deep(.el-textarea) {
      .el-textarea__inner {
        resize: none;
      }
    }
  }
  :deep(.el-table__row) {
    font-weight: 600;
    color: rgb(4, 153, 14);
  }
  .combination-t {
    width: 14px;
    height: calc(100% + 1px);
    position: absolute;
    border-top: 2px solid red;
    border-left: 2px solid red;
  }
  .combination-l {
    width: 14px;
    height: calc(100% + 1px);
    top: -30%;
    position: absolute;
    border-left: 2px solid red;
  }
  .combination-b {
    width: 14px;
    height: calc(100% + 1px);
    position: absolute;
    top: -30%;
    border-bottom: 2px solid red;
    border-left: 2px solid red;
  }
}
</style>
